<template>
	<view class="userinfo">
		<!--头像 + 背景-->
		<view class="user-section">
			<image class="bg" :src="userBg"></image>
			<!--#ifdef H5-->
			<!--h5直接上传头像-->
			<view class="portrait-box" @tap="uploadImage">
				<image
					class="portrait"
					:src="profileInfo.userImage || ''"
				></image>
			</view>
			<!-- #endif -->
			<!--#ifndef H5-->
			<!--非h5裁剪头像上传-->
			<view class="portrait-box">
				<avatar
					canRotate="false"
					selWidth="200px"
					selHeight="400upx"
					@upload="handleUploadFile"
					:avatarSrc="profileInfo.userImage || headImg"
					avatarStyle="width: 200upx; height: 200upx; border-radius: 100%; border: 6upx solid #fff;"
				>
				</avatar>
			</view>
			<!-- #endif -->
		</view>
		<view class="input-content">
			<view class="input-item">
				<text class="tit">手机号</text>
				<input
					type="number"
					v-model="profileInfo.phone"	
					disabled
					placeholder="请输入手机号码"
				/>
			</view>
			<view class="input-item">
				<text class="tit">账　号</text>
				<input
					type="text"
					v-model="profileInfo.username"
					disabled
					placeholder="请输入您的账号"
				/>
			</view>
			<view class="input-item">
				<text class="tit">姓　名</text>
				<input
					type="text"
					v-model="profileInfo.name"
					placeholder="请输入您的姓名"
				/>
			</view>
			<view class="input-item">
				<text class="tit">性　别</text>
				<radio-group @change="handleGenderChange">
					<label
						class="gender-item"
						v-for="(item, index) in genders"
						:key="index"
					>
						<radio
							class="gender-item-radio"
							
							:value="item.value"
							:checked="item.value == profileInfo.sex"
						/>
						<text class="gender-item-text">{{ item.name }}</text>
					</label>
				</radio-group>
			</view>
			<view class="input-item">
				<text class="tit">生　日</text>
				<picker mode="date" v-model="birthday" @change="bindDateChange">
					<view class="date" style="background: none;">{{
						birthday || '请选择日期'
					}}</view>
				</picker>
			</view>
			<button
				class="confirm-btn"
				:class="'bg-'"
				:disabled="btnLoading"
				:loading="btnLoading"
				@tap="toUpdateInfo"
			>
				修改资料
			</button>
		</view>

		
	</view>
</template>

<script>
/**
 * @des 修改用户信息
 *
 * @author stav stavyan@qq.com
 * @date 2020-01-10 14:28
 * @copyright 2019
 */
import { getUserinfo, getPortrait, getUpdata } from '@/api/userInfo.js';
import avatar from '@/components/rf-avatar/rf-avatar';
import moment from '@/common/moment';

export default {
	components: { avatar },
	data() {
		return {
			loadProgress: 0,
			CustomBar: this.CustomBar,
			profileInfo: {
				    "username":"",
					"phone":"",
				    "goods":"",
				    "name":"",
				    "sex":"",
				    "birthday":"",
			},
			genders: [
				{
					value: null,
					name: '未知'
				},
				{
					value: '男',
					name: '男'
				},
				{
					value: '女',
					name: '女'
				}
			],
			date: moment().format('YYYY-MM-DD'),
			token: null,
			loading: true,
			// headImg: this.$mAssetsPath.headImg,
			userBg: "../../../static/missing-face.png",
			btnLoading: false,
			dateValue:0,
			birthday:""
		};
	},
	onLoad() {
		this.initData();
	},
	methods: {
		// 上传头像
		uploadImage() {
			// 从相册选择图片
			const _this = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],	
				success: function(res) {
					console.log(res);
					_this.handleUploadFile(res.tempFilePaths);
				}
			});
		},
		// 上传头像
		handleUploadFile(data) {
			const _this = this;
			const filePath = data.path || data[0];
			uni.uploadFile({
			  url: 'http://1.92.82.82:3001/upload/portrait',         // 上传接口地址
			  filePath: filePath,                    // 本地文件路径
			  name: 'image',                              // 文件表单名
			  header: { 'Authorization': 'Bearer token' },
			  formData: { phone: this.profileInfo.phone },
			  success: (res) => {
				this.profileInfo.userImage=res.data.data;
				this.initData();
			  },
			  fail: (err) => {
			    console.log('上传失败:', err);
			  },
			  complete: () => {
			    console.log('上传完成');
			  }
			})
		},
		// 监听日期更改
		bindDateChange(e) {
			const timestamp = moment(e.detail.value).unix();
			this.birthday = e.detail.value;
			this.dateValue=timestamp
		},
		// 监听性别更改
		handleGenderChange(e) {
			this.profileInfo.sex = e.detail.value;
		},
		// 数据初始化
		initData() {
			// this.token = uni.getStorageSync('accessToken') || undefined;
			this.getMemberInfo();
		},
		// 获取用户信息
		async getMemberInfo() {
			const res = await getUserinfo(this.$store.state.username);
			this.profileInfo = res.data.data;
			// 将时间戳转换为 Date 对象
			const date = moment.unix(this.profileInfo.birthday);
			this.dateValue=res.data.data.birthday
			// 获取年、月、日
			const year = date.year();
			const month = date.month() + 1; // getMonth() 返回的月份是从 0 开始的，所以需要加 1
			const day = date.date();
			this.birthday=`${year}-${month}-${day}`
		},
		// 更新用户信息
		async toUpdateInfo() {
			this.handleUpdateInfo();
		},
		// 更新用户信息
		async handleUpdateInfo() {
			const mydata={
				username:this.profileInfo.username,
				phone:this.profileInfo.phone,
			    name:this.profileInfo.name,
			    sex:this.profileInfo.sex,
			    birthday:this.dateValue,
			};
			const res = (await getUpdata(mydata)).data;
			if(res.code===1){
				uni.showToast({
					title:res.msg,
					icon:'success'
				})
			}else{
				uni.showToast({
					title:res.msg,
					icon:'error'
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f8f8f8;
}

.userinfo {
	.user-section {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 320upx;
		padding: 40upx 30upx 0;
		overflow: hidden;
		position: relative;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			opacity: 0.84;
		}

		.portrait-box {
			clear: both;
			z-index: 2;
		}

		.portrait {
			position: relative;
			width: 200upx;
			height: 200upx;
			border-radius: 50%;
			border: 6upx solid #fff;
		}

		.yticon {
			position: absolute;
			line-height: 1;
			z-index: 5;
			font-size: 48upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0, 0, 0, 0.4);
		}

		.pt-upload-btn {
			right: 0;
			bottom: 10upx;
		}

		.bg-upload-btn {
			right: 20upx;
			bottom: 16upx;
		}
	}

	.input-content {
		padding: 40upx 60upx;

		.input-item {
			display: flex;
			padding: 0 30upx;
			background: white;
			height: 80upx;
			line-height: 80upx;
			border-radius: 4px;
			margin-bottom: 30upx;

			&:last-child {
				margin-bottom: 0;
			}

			.tit {
				width: 100upx;
				font-size: $font-sm + 2upx;
				color: #333333;
			}

			input {
				width: calc(100% - 100upx);
				height: 80upx;
				line-height: 80upx;
				font-size: $font-base + 2upx;
				color: darkgray;
			}

			.date {
				height: 80upx;
				line-height: 80upx;
				font-size: $font-base + 2upx;
				color: dark;
			}

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: black;
					border-color: white;
				}
			}
		}
	}
}
</style>
